<template>
  <div class="goodsList">
    <div class="goodContent" v-for="(goods, index) in commodity" :key="index">
      <div class="goodContent_img">
        <img :src="'../../../../../binbing/minePagePublic/goods' + goods.img + '.webp'" />
      </div>
      <div class="goodContent_price">
        <div class="goodsName">
          {{ goods.name }}
        </div>
        <div class="goodsDesc">
          {{ goods.desc }}
        </div>
        <div class="goodsMoney">￥{{ goods.price }}</div>
      </div>
    </div>
    <LoadedAll />
  </div>
</template>

<script>
import LoadedAll from "./LoadedAll.vue"
export default {
  name: "GoodsList",
  components:{
    LoadedAll
  },
  data() {
    return {
      commodity: [
        {
          img: "01",
          name: "HUAWEI Mate X2 (5G版)",
          desc: "",
          price: 18999,
        },
        {
          img: "02",
          name: "HUAWEI Mate Xs 2",
          desc: "每天10:08限时抢购",
          price: 9999,
        },
        {
          img: "03",
          name: "【订金】华为智慧屏 SE ME MC",
          desc: "预定最高省800元",
          price: 3199,
        },
        {
          img: "04",
          name: "华为智慧屏V系列",
          desc: "预定省1000元",
          price: 7499,
        },
        {
          img: "05",
          name: "【订金】华为充电器SuperCharge快充版(Max 40W)",
          desc: "预定优惠40元",
          price: 159,
        },
        {
          img: "06",
          name: "HUAWEI MatePad Pro 12.6英寸",
          desc: "预定立省300元|3期免息",
          price: 4499,
        },
      ],
    };
  },
};
</script>

<style scoped>
.goodsList {
  margin: 0 0.16rem;
  width: auto;
  height: auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding-bottom: 0.58rem;
}
.goodContent {
  width: 1.87rem;
  height: 2.85rem;
  background-color: #fff;
  border-radius: 0.08rem;
  margin-top: 0.08rem;
}
.goodContent_img {
  width: 1.4rem;
  height: 1.4rem;
  padding: 0.235rem;
}
.goodContent_img > img {
  width: 1.4rem;
  height: 1.4rem;
  display: block;
}
.goodContent_price {
  width: 1.71rem;
  height: 0.79rem;
  padding: 0.08rem 0.08rem 0.12rem;
}
.goodsName {
  width: 1.71rem;
  height: 0.36rem;
  font-size: 0.13rem;
  line-height: 0.18rem;
  font-weight: 700;
}
.goodsDesc {
  width: 1.71rem;
  height: 0.16rem;
  font-size: 0.12rem;
  font-weight: 400;
  line-height: 0.16rem;
  opacity: 0.5;
}
.goodsMoney {
  width: 1.71rem;
  height: 0.19rem;
  margin-top: 0.07rem;
  color: rgb(207, 10, 44);
  font-size: 0.16rem;
  font-weight: 600;
}
</style>